<template>
  <div class="continue">
    <Modal v-model="modelShow" width="360" @on-ok="deleteBusiMsg">
      <p slot="header" style="color: #2b85e4;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>录入终止原因</span>
      </p>
      <div style="text-align:center">
        <Form  label-position="left"  ref="deleteForm" :model="deleteForm">
          <FormItem label="终止类型：" :label-width="0" prop='type' :rules="validator.must">
            <Select v-model="deleteForm.type" placeholder="请选择业务终止原因" >
              <Option value="调整出资人">调整出资人</Option>
              <Option value="调整董事、监事、经理">调整董事、监事、经理</Option>
              <Option value="更换地址">更换地址</Option>
              <Option value="更换委托人">更换委托人</Option>
              <Option value="修改名称信息">修改名称信息</Option>
              <Option value="-1">其他</Option>
            </Select>
          </FormItem>
          <FormItem v-if="deleteForm.type === '-1'" label="终止原因：" :label-width="0" prop='msgStr' :rules="validator.chinese">
            <Input v-model="deleteForm.msgStr" type="text" placeholder="终止原因"></Input>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <div v-if="items.length === 0" style="width: 100%;line-height: 3rem;text-align: center;font-size: large;">暂无数据</div>
    <ul v-if="items.length > 0">
      <li v-for="(item, index) in items" :key="index">
        <span v-if="item.state === '01'||item.state === '04' || item.state === '09'" @click="deleteBusi(item)" class="continue_delete">
          终止<br/>业务</span>
        <span v-if="item.state === '01'||item.state === '04'" @click="continueBusi(item)" class="continue_apply">继续<br/>办理</span>
        <span v-else-if="item.state !== '12'" @click="continueBusi(item)" class="continue_process">查看<br/>进度</span>
        <div class="continue_item">
          <div class="continue_item-title">{{item.entname}}</div>
          <div class="continue_item-info">
            <span>业务类型：<em>{{item.opertype | dict('CD01')}}</em></span><br/>
            <span>业务状态：<em>{{item.state  | dict('DFCP09')}}</em></span><br/>
            <span>申请时间：<em>{{item.appdate}}</em></span>
          </div>
        </div>
      </li>
    </ul>
    <div class="continue_bottom">
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  import validator from '../../utils/validatorUtil.js'
  export default {
    data() {
      return {
        validator,
        items: [],
        deleteForm: {
          msgStr: ''
        },
        modelShow: false,
        currentItem: {}
      }
    },
    methods: {
    getList() {
      request.get('/interface/wechat/mytask/queryList.do')
        .then(res => {
          if (res.data.result === 'error') {
              this.$ErrorAlert(res.data.message)
          } else if (res.data.result === 'success') {
            this.items = res.data.data
          }
        })
    },
    deleteBusiMsg() {
      this.deleteForm.msgStr = (this.deleteForm.type !== '-1' ? this.deleteForm.type : this.deleteForm.msgStr)
      request.get('/interface/wechat/mytask/endBusi.do', {gid: this.currentItem.gid, msg: this.deleteForm.msgStr})
        .then(res => {
          if (res.data.result === 'error') {
            this.$ErrorAlert(res.data.message)
          } else if (res.data.result === 'success') {
            this.$SuccessAlert('终止业务成功')
            this.currentItem.state = '12'
          }
        })
    },
    deleteBusi(item) {
      this.$Modal.confirm({
        title: '业务终止温馨提醒',
        content: '<p>业务一经终止，以后就无法继续在这此纪录办理业务，请进一步确认是否终止？</p>',
        okText: '确认',
        onOk: () => {
          this.currentItem = item
          this.modelShow = true
        }
      })
    },
    continueBusi(item) {
      sessionStorage.setItem('gid', item.gid)
      sessionStorage.setItem('pripid', item.pripid)
      sessionStorage.setItem('state', item.state)
      sessionStorage.setItem('username', item.username)
      if (item.state === '01' || item.state === '04') {
        this.$router.push({name: 'ApplyModule'})
      } else {
        this.$router.push({name: 'Process', params: {'gid': item.gid}})
      }
    }
  },
  mounted() {
    localStorage.setItem('regorg', this.$route.params.regorg)
    this.getList()
  },
    components: {
      MyFooter
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .continue {
    position: relative;
    min-height: 100%;
    padding-bottom: 2.25rem;
    background: #f3f3f3;
    li {
      margin-bottom: 0.54rem;
      background: #fff;
      padding: 0.54rem;
      overflow: hidden;
    }
    &_apply {
      float: right;
      margin-left: 0.54rem;
      padding: 0.22rem 0.43rem;
      cursor: pointer;
      color: #fff;
      border: 1px solid #00b3ff;
      border-radius: 3px;
      background: #00b3ff;
    }
    &_delete {
      float: right;
      margin-left: 0.54rem;
      padding: 0.22rem 0.43rem;
      cursor: pointer;
      color: #fff;
      border: 1px solid #00b3ff;
      border-radius: 3px;
      background: #f43530;
    }
    &_process{
      float: right;
      margin-left: 0.54rem;
      padding: 0.22rem 0.43rem;
      cursor: pointer;
      color: #495060;
      border: 1px solid #00b3ff;
      border-radius: 3px;
      background-color: #f7f7f7;
      border-color: #dddee1;
    }
    &_item {
      &-title {
        color: #00b3ff;
        overflow: hidden;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 0.22rem;
        margin-bottom: 0.14rem;
      }
      &-info {
        font-size: 0.43rem;
        color: #7d7d7d;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    &_bottom {
      position: absolute;
      width: 100%;
      bottom: 0;
    }
  }

</style>
